<template>
  <div class="dialogBox" v-if="showDialog" @touchmove.prevent>
    <div class="contentBox">
      <div class="title" v-if="type === 2">系统提示</div>
      <div class="contentText" :class="(type === 2 ? 'contentText2' : '')">
        <div>{{content}}</div>
      </div>
      <div class="btn">
        <a class="btn0" @click="cancelFn" v-if="btnText.length === 2">{{btnText[0]}}</a>
        <a class="btn1" :class="(btnText.length === 2 ? '' : 'btn2')" @click="sureFn">{{btnText[1] || btnText[0]}}</a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'dialogPlugin',
    data () {
      return {
        showDialog: true, // 控制关闭弹框
        type: 1, // 1 无标题; 2 有标题
        title: '系统提示', // 标题
        content: '网络似乎是不通的',  // 弹框内容
        btnText: ['知道了'], // 按钮，支持两个及以下
        cancel: null,
        sure: null
      }
    },
    methods: {
      // 点击取消(第一个按钮)事件
      cancelFn () {
        this.showDialog = false; // 点击默认关闭
        this.cancel && this.cancel(); // 传入的回调函数
      },
      // 点击确定(第二个按钮)事件
      sureFn () {
        this.showDialog = false; // 点击默认关闭
        this.sure && this.sure(); // 传入的回调函数
      }
    }
  }
</script>

<style scoped>
  .dialogBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
  }

  .dialogBox .contentBox {
    min-width: 5.6rem;
    max-width: 5.6rem;
    background: #fff;
    border-radius: .06rem;
  }

  .dialogBox .contentBox .title {
    height: .9rem;
    line-height: .9rem;
    font-size: .36rem;
    padding-top: .1rem;
    color: #303942;
    text-align: center;
  }

  .dialogBox .contentBox .contentText {
    padding: .5rem .37rem .3rem;
    font-size: .3rem;
    color: #77828c;
    text-align: center;
    line-height: .42rem;
  }

  .dialogBox .contentBox .contentText2 {
    padding-top: 0;
  }

  .dialogBox .contentBox .contentText > div {
    line-height: 1.5;
    padding: 0 0.2rem;
  }

  .dialogBox .contentBox .btn {
    line-height: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='0' stroke='#dbdbdb' stroke-width='1'/></svg>");
  }

  .dialogBox .contentBox .btn .btn0, .dialogBox .contentBox .btn .btn1, .dialogBox .contentBox .btn .btn2 {
    text-align: center;
    display: block;
    color: #2a92eb;
    font-size: .36rem;
    cursor: pointer;
  }

  .dialogBox .contentBox .btn .btn0 {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='100%' y1='0' x2='100%' y2='100%' stroke='#dbdbdb' stroke-width='1'/></svg>");
    width: 50%;
    float: left;
    color: #303942;
  }

  .dialogBox .contentBox .btn .btn1 {
    float: left;
    width: 49%;
  }

  .dialogBox .contentBox .btn .btn2 {
    float: left;
    width: 100%;
  }
</style>
